<template>
  <div class="book-wrapper">
    <div class="more-box">
      <h5 class="title">书签</h5>
      <span class="more-btn" @click="router.push('/index/book')">
        更多
        <var-icon name="chevron-right" class="more-icon" />
      </span>
    </div>
    <div
      class="book-cont"
      :style="{
        gridTemplateColumns: `repeat(${top4ListRendonly.length}, 12rem)`,
      }"
    >
      <MobileCard
        v-for="(item, index) in top4ListRendonly"
        :key="item.id"
        :source="item"
        @click="openPage(item)"
        :class="`bookCard ${
          index === top4ListRendonly.length - 1 ? 'endBookCard' : ''
        }`"
      />
    </div>
  </div>
</template>
<script setup name="BookMark">
import { ref, inject, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import useSymbols from '../../compostions/useSymbols.js';
import MobileCard from '../../components/MobileCard/index.vue';

const { getTop4List, top4ListRendonly } = inject(useSymbols);

const router = useRouter();

const swipperIndexRef = ref(0);
const endLeftRef = ref(0);

let blankW = 0;
let htmlFontSize = 12;
onMounted(() => {
  getTop4List();
  setTimeout(() => {
    const bodyW = document.body.getBoundingClientRect().width;
    htmlFontSize = getComputedStyle(window.document.documentElement)[
      'font-size'
    ].split('px')[0];
    const paddingW = 1 * htmlFontSize; // 两边空白的宽度
    const oneCardW = 12 * htmlFontSize; // 单个卡片的宽度
    blankW = bodyW - (oneCardW + paddingW); // 卡片显示后的空白区域
  }, 400);
});

// let startX, endX;
// const startSwipe = (e) => {
//   startX = e.touches[0].clientX;
// };

// let direction = 'left';
// const onSwipe = (e) => {
//   endX = e.touches[0].clientX;
//   // console.log(startX - endX);
//   if (startX - endX > 50) {
//     direction = 'left';
//     return;
//   } else {
//     if (startX - endX < 0) {
//       direction = 'right';
//     }
//   }
// };

// const endSwipe = () => {
//   if (direction === 'left') {
//     if (swipperIndexRef.value === top4ListRendonly.value.length - 2) {
//       swipperIndexRef.value = top4ListRendonly.value.length - 2;
//       if (endLeftRef.value === 0) {
//         const endBookCardDom = document.querySelector('.endBookCard').getBoundingClientRect();
//         endLeftRef.value = Number(((endBookCardDom.left - blankW) / htmlFontSize).toFixed(2)) - 0.3;
//       }
//     } else {
//       endLeftRef.value = 0;
//       swipperIndexRef.value += 1;
//     }
//   } else {
//     if (swipperIndexRef.value === 0) return;
//     if (endLeftRef.value !== 0) {
//       endLeftRef.value = 0;
//     } else {
//       swipperIndexRef.value -= 1;
//     }
//   }
// };

// 打开窗口
const openPage = ({ url }) => {
  window.open(url);
};
</script>
<style scoped lang="less">
.book-wrapper {
  width: 100%;
  background-color: #fff;
  margin-top: 0.5rem;
  .more-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.5rem 0.5rem 0.5rem;
    .title {
      font-size: .9rem;
      font-weight: 400;
      color: #343434;
      margin: 0;
      position: relative;
      padding-left: 0.5rem;
      &::before {
        width: 0.4rem;
        height: .9rem;
        border-radius: 0.2rem;
        background-color: var(--system-primary-color);
        position: absolute;
        top: calc(50% - 0.45rem);
        left: 0;
        content: '';
      }
    }
    .more-btn {
      display: flex;
      align-items: center;
      color: #999;
      font-size: .9rem;
      .more-icon {
        font-size: 1.4rem;
        margin-left: -0.3rem;
      }
    }
  }
  .book-cont {
    width: 100%;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 0.2rem 0.5rem 1rem 0.5rem;
    box-sizing: border-box;
    display: grid;
    
    grid-column-gap: 0.5rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    // .card-box {
    //   display: grid;
    //   grid-template-columns: repeat(4, 12rem);
    //   grid-column-gap: 0.5rem;
    //   flex-wrap: nowrap;
    //   transition: all 0.5s;
    // }
    /* 隐藏滚动条的样式 */
    &::-webkit-scrollbar {
      display: none;
    }
  }
}
</style>
